<div class="monitor-tab-div">
    <!-- 基本信息 -->
    <div class="m-panel">
    	<div class="m-panel-title">
    		<span>基本信息</span>
    	</div>
    	<div class="m-panel-body base-info-div">
    		<form class="bs-example form-horizontal xs-form">
                <div id="base_info_monitor_div">
                    <div class="form-group">
                        <label class="col-lg-2 control-label">监控器名称：</label>
                        <label class="col-lg-4 control-label tl" data-id="monitorName"></label>
                        <label class="col-lg-2 control-label">监控器类型：</label>
                        <label class="col-lg-4 control-label tl" data-id="monitorType"></label>
                    </div>
                </div>

                <div id="base_info_asset_div"> 
                    <div class="form-group"></div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">被监控资产名称：</label>
                        <label class="col-lg-4 control-label tl" data-id="assetName"></label>
                        <label class="col-lg-2 control-label">资产类型：</label>
                        <label class="col-lg-4 control-label tl" data-id="assetTypeName"></label>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-2 control-label">IP：</label>
                        <label class="col-lg-4 control-label tl" data-id="mainIp"></label>
                        <label class="col-lg-2 control-label">安全域：</label>
                        <label class="col-lg-4 control-label tl" data-id="securityDomainName"></label>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-2 control-label">操作系统：</label>
                        <label class="col-lg-4 control-label tl" data-id="osTypeName"></label>
                        <label class="col-lg-2 control-label">物理位置：</label>
                        <label class="col-lg-4 control-label tl" data-id="locationCbName"></label>
                    </div>
                </div>
            </form>
    	</div>
    </div>

    <!-- JVM信息 -->
    <div class="m-panel">
        <div class="m-panel-title">
            <span>JVM信息</span>
        </div>
        <div class="m-panel-body base-info-div" id="JVM_info_div">
            <form class="bs-example form-horizontal xs-form">
                <div class="form-group">
                    <label class="col-lg-2 control-label">JVM宿主操作系统名称：</label>
                    <label class="col-lg-4 control-label tl" data-id="operatingName"></label>
                    <label class="col-lg-2 control-label">JVM堆最大值：</label>
                    <label class="col-lg-4 control-label tl" data-id="maxMem"></label>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">JVM宿主操作系统版本：</label>
                    <label class="col-lg-4 control-label tl" data-id="osVersion"></label>
                    <label class="col-lg-2 control-label">JVM堆当前值：</label>
                    <label class="col-lg-4 control-label tl" data-id="commitMemory"></label>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">JVM版本：</label>
                    <label class="col-lg-4 control-label tl" data-id="vmVersion"></label>
                    <label class="col-lg-2 control-label">JVM堆空闲值：</label>
                    <label class="col-lg-4 control-label tl" data-id="freeMem"></label>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">JVM提供商：</label>
                    <label class="col-lg-4 control-label tl" data-id="vmVendor"></label>
                    <label class="col-lg-2 control-label">JVM堆空闲百分比（%）：</label>
                    <label class="col-lg-4 control-label tl" data-id="memUsage"></label>
                </div>
            </form>
        </div>
    </div>

     <!-- JVM动态信息 -->
    <div class="m-panel">
        <div class="m-panel-title">
            <span>JVM动态信息</span>
        </div>
        <div class="m-panel-body">
            <div id="JVM_line_chart" class="monitor-chart" style="height:210px"></div>
        </div>
    </div>

    <div class="box">
        <div class="box-item" style="width:50%">
            <!-- WEB模块信息-->
            <div class="m-panel">
                <div class="m-panel-title">
                    <span>WEB模块信息</span>
                </div>
                <div class="m-panel-body">
                    <div class="table-div" id="WEB_module_info_table" style="height:210px"></div>
                </div>
            </div>
        </div>
        <div class="box-item" style="width:50%">
            <!-- 线程信息 -->
            <div class="m-panel">
                <div class="m-panel-title">
                    <span>线程信息</span>
                </div>
                <div class="m-panel-body">
                    <div class="table-div" id="thread_info_table" style="height:210px"></div>
                </div>
            </div>
        </div>
    </div>

     <!-- Tomcat进程时间(单位：ms) -->
    <div class="m-panel">
        <div class="m-panel-title">
            <span>Tomcat进程时间(单位：ms)</span>
        </div>
        <div class="m-panel-body">
            <div id="tomcat_process_line_chart" class="monitor-chart" style="height:210px"></div>
        </div>
    </div>

    <div class="box">
        <div class="box-item" style="width:50%">
            <!-- 当前线程数-->
            <div class="m-panel">
                <div class="m-panel-title">
                    <span>当前线程数</span>
                </div>
                <div class="m-panel-body">
                    <div id="current_thread_chart" class="monitor-chart" style="height:210px"></div>
                </div>
            </div>
        </div>
        <div class="box-item" style="width:50%">
            <!-- 当前忙线程数 -->
            <div class="m-panel">
                <div class="m-panel-title">
                    <span>当前忙线程数</span>
                </div>
                <div class="m-panel-body">
                    <div id="current_thread_busy_chart" class="monitor-chart" style="height:210px"></div>
                </div>
            </div>
        </div>
    </div>

     <!-- 线程池信息 -->
    <div class="m-panel">
        <div class="m-panel-title">
            <span>线程池信息</span>
        </div>
        <div class="m-panel-body">
            <div class="table-div" id="ports_info_table" style="height:210px"></div>
        </div>
    </div>

    <div class="box">
        <div class="box-item" style="width:50%">
            <!-- Tomcat接收字节数（MB）-->
            <div class="m-panel">
                <div class="m-panel-title">
                    <span>Tomcat接收字节数（MB）</span>
                </div>
                <div class="m-panel-body">
                    <div id="receive_byte_chart" class="monitor-chart" style="height:210px"></div>
                </div>
            </div>
        </div>
        <div class="box-item" style="width:50%">
            <!-- Tomcat发送字节数（MB） -->
            <div class="m-panel">
                <div class="m-panel-title">
                    <span>Tomcat发送字节数（MB）</span>
                </div>
                <div class="m-panel-body">
                    <div id="sent_byte_chart" class="monitor-chart" style="height:210px"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="box-item" style="width:50%">
            <!-- Tomcat请求数-->
            <div class="m-panel">
                <div class="m-panel-title">
                    <span>Tomcat请求数</span>
                </div>
                <div class="m-panel-body">
                    <div id="request_count_chart" class="monitor-chart" style="height:210px"></div>
                </div>
            </div>
        </div>
        <div class="box-item" style="width:50%">
            <!-- Tomcat错误数 -->
            <div class="m-panel">
                <div class="m-panel-title">
                    <span>Tomcat错误数</span>
                </div>
                <div class="m-panel-body">
                    <div id="error_count_chart" class="monitor-chart" style="height:210px"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 请求信息 -->
    <div class="m-panel">
        <div class="m-panel-title">
            <span>请求信息</span>
        </div>
        <div class="m-panel-body" id="request_info_div">
            <div class="m-panel-body-card">
                <ul>
                    <li class="active" data-action="request_handele_list">Tomcat请求处理信息</li>
                    <li data-action="linker_info_list">Tomcat连接器信息</li>
                </ul>
            </div>
            <div class="table-div" id="request_info_table" style="height:300px"></div>
        </div>
    </div>
</div>

<div class="monitor-tab-div" data-type="event"></div>


<script type="text/javascript">
$(document).ready(function (){
require([index_web_app_name + '/js/plugin/monitor/catagory/tomcat.js'] ,function (tomcat){

var urlParamObj = index_query_param_get()
view_init()

function view_init()
{
    urlParamObj.time = $("#query_time_label").text()
    tomcat.base_info(urlParamObj)
    tomcat.JVM_info_render($("#JVM_info_div"),urlParamObj)
    tomcat.JVM_line_chart($("#JVM_line_chart"),urlParamObj)
    tomcat.WEB_module_info_list($("#WEB_module_info_table"),urlParamObj)
    tomcat.thread_info_list($("#thread_info_table"),urlParamObj)
    tomcat.tomcat_process_line_chart($("#tomcat_process_line_chart"), urlParamObj)
    tomcat.current_thread_chart($("#current_thread_chart"),urlParamObj)
    tomcat.current_thread_busy_chart($("#current_thread_busy_chart"),urlParamObj)
    tomcat.ports_info_list($("#ports_info_table"),urlParamObj)
    tomcat.receive_byte_chart($("#receive_byte_chart"), urlParamObj)
    tomcat.sent_byte_chart($("#sent_byte_chart"),urlParamObj)
    tomcat.request_count_chart($("#request_count_chart"),urlParamObj)
    tomcat.error_count_chart($("#error_count_chart"),urlParamObj)
    request_info_render(urlParamObj)

}

window.index_monitor_init = function ()
{
    view_init()
}

function request_info_render(obj) {
    var el_ul = $("#request_info_div").find("ul")
    el_ul.find("li").unbind("click")

    el_ul.find("li").click(function (){
        $(this).siblings().removeClass("active")
        $(this).addClass("active")
        tomcat[$(this).attr("data-action")]($("#request_info_table") ,obj)
    })

    tomcat.request_handele_list($("#request_info_table") ,obj)
}

})
})